<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./v4.6.5-dist/ol.css">
    <link rel="icon" href="./img/geography.ico">
    <title>2018地理信息系统</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        #map {
            width: 100%;
            height: 90%;
        }
    </style>
    <script src="./v4.6.5-dist/ol.js"></script>
</head>
<body>
<div id="map">

</div>
<div>
    <input name="map" value="WMS" type="radio" checked="checked">WMS
    <input name="map" value="XYZ" type="radio">XYZ
    <input name="map" value="WM7S" type="radio">WM7S
    <input name="map" value="shape" type="radio">shape
    <input name="map" value="excel" type="radio">excel
    <input name="map" value="自定义" type="radio">自定义
</div>
<div>
    <input type="checkbox" onclick="replace(this)">替换底图
    <input type="checkbox" onclick="addLayer(this)">添加图层
</div>
<script>
    var map = new ol.Map({
        target: "map",
        layers: [
            new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url: "http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}"
                })
            })
        ],
        view: new ol.View({
            center: ol.proj.transform([116.38, 39.90], 'EPSG:4326', 'EPSG:3857'),
            zoom: 6
        })
    })

    var baseMap = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: "http://t3.tianditu.com/DataServeqr?T=img_w&x={x}&y={y}&l={z}"
        })
    })

    var baseWMS = new ol.layer.Image({
        source: new ol.source.ImageWMS({
            url: 'http://192.168.0.249:8081/geoserver/xbd/wms?layers=xbd:xbd_gnqh_tiaozhenghou',
            serverType: 'geoserver'
        }),
    })

    function replace(e) {
        if (e.checked) {
            map.removeLayer(map.getLayers().item(0));
            map.removeLayer(baseMap);
            map.addLayer(baseWMS);
        }
        if (!e.checked) {
            map.addLayer(baseMap);
            map.removeLayer(baseWMS);
        }

    }
    function addLayer(e) {

        map.getView().setCenter(ol.proj.fromLonLat([101.33, 30.19]))

        if (e.checked) {
            map.addLayer(baseWMS);
        }
        if (!e.checked) {
            map.removeLayer(baseWMS);
        }
    }
</script>
</body>
</html>